<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">高度设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['areaHeight']"
        />
      </el-form-item>
    </div>

    <template v-if="optionsInfo['replenishArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">补充说明设置</el-divider>
        </div>
        <template v-if="optionsInfo['replenishArea']">
          <el-form-item class="replenish-shown" label="补充说明显示">
            <el-switch v-model="optionsInfo.replenishShown"/>
          </el-form-item>
          <el-form-item class="replenish-shown" label="补充说明内容" v-if="(optionsInfo.replenishShown)">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="optionsInfo.replenishContent"
                      placeholder="请输入内容" size="small"/>
          </el-form-item>
        </template>
      </div>
    </template>

    <template v-if="optionsInfo['roomNumberArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">诊室号设置</el-divider>
        </div>
        <el-form-item label="序号显示" v-if="optionsInfo['roomNumberISControl']">
          <el-switch v-model="optionsInfo['roomNumberShown']"/>
        </el-form-item>
        <template v-if="optionsInfo['roomNumberShown']">
          <el-form-item label="手动设置诊室号" class="replenish-shown">
            <el-switch v-model="optionsInfo['roomNumberAuto']"/>
          </el-form-item>
          <template v-if="optionsInfo['roomNumberAuto']">
            <el-form-item class="replenish-shown" label="序号">
              <el-input-number
                  :min="1"
                  :max="499"
                  size="small"
                  v-model="optionsInfo['roomNumber']"
              />
            </el-form-item>
          </template>
        </template>
      </div>
    </template>

    <template v-if="optionsInfo['formEditorInfo']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">业务说明</el-divider>
        </div>
        <el-form-item label="业务说明">
          <el-button
              type="primary"
              size="small"
              @click="handleSelect('formEditorInfo',(optionsInfo.businessContent))"
          >
            业务说明
          </el-button>
        </el-form-item>
      </div>

    </template>

    <template v-if="optionsInfo['roomNameArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">诊室设置</el-divider>
        </div>
        <template v-if="optionsInfo['roomNameShown']">
          <el-form-item label="自动获取接口诊室名" class="replenish-shown">
            <el-switch v-model="optionsInfo['roomNameAuto']"/>
            <el-tooltip
                class="item"
                effect="dark"
                content="开关开启获取接口数据。开关关闭获取模板设置数据"
                placement="bottom"
            >
              <el-button>
                <i class="el-icon-warning"></i>
              </el-button>
            </el-tooltip>
          </el-form-item>
          <el-form-item class="replenish-shown" label="自定义诊室名称">
            <el-input :disabled="optionsInfo['roomNameAuto']" v-model="optionsInfo['roomName']" placeholder="请输入内容"
                      size="small"/>
          </el-form-item>
          <!--诊室信息选中字段-->
          <el-form-item class="replenish-shown" label="窗口类型">
            <el-select v-model="optionsInfo['roomNameKey']" placeholder="请选择"
                       :disabled="!optionsInfo['roomNameAuto']">
              <el-option
                  v-for="item in windowOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item class="replenish-shown" label="诊室名称字体">
            <el-input-number
                :min="1"
                size="small"
                v-model="optionsInfo['roomNameFontSize']"
            />
          </el-form-item>
        </template>
      </div>

    </template>

    <template v-if="optionsInfo['currentPatientArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">正在就诊标题</el-divider>
        </div>
        <el-form-item class="replenish-shown" label="就诊名称">
          <el-input v-model="optionsInfo['currentPatientTitle']" placeholder="请输入内容" size="small"/>
        </el-form-item>
        <el-form-item class="replenish-shown" label="正在就诊标题字号">
          <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['currentPatientTitleFontSize']"
          />
        </el-form-item>
        <el-form-item label="正在就诊标题颜色" class="replenish-shown">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['currentPatientTitleColor']"/>
        </el-form-item>
        <el-form-item label="粗细设置" class="replenish-shown">
          <el-select v-model="optionsInfo['currentPatientTitleFontWeight']" placeholder="请选择">
            <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>

    </template>

    <template v-if="optionsInfo['currentPatientArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">正在就诊内容</el-divider>
        </div>

        <el-form-item class="replenish-shown" label="正在就诊内容字号">
          <el-input-number
              :min="1"
              size="small"
              v-model="optionsInfo['currentPatientConnectFontSize']"
          />
        </el-form-item>
        <el-form-item label="正在就诊内容颜色" class="replenish-shown">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['currentPatientConnectColor']"/>
        </el-form-item>
        <el-form-item label="正在就诊内容换行" class="replenish-shown">
          <el-switch v-model="optionsInfo['currentPatientConnectWrap']"/>
        </el-form-item>
        <el-form-item label="粗细设置" class="replenish-shown">
          <el-select v-model="optionsInfo['currentPatientConnectFontWeight']" placeholder="请选择">
            <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </template>

    <template v-if="optionsInfo['publishArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">信息发布设置</el-divider>
        </div>

        <el-form-item class="replenish-shown" label="标题显示">
          <el-switch v-model="optionsInfo.publishSign.shown"/>
        </el-form-item>

        <el-form-item class="replenish-shown" label="标题内容">
          <el-input v-model="optionsInfo['publishSign']['content']" placeholder="请输入内容" size="small"/>
        </el-form-item>

        <el-form-item label="字号">
          <el-input-number
              :min="14"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo['publishSign']['fontSize']"
          />
        </el-form-item>
        <el-form-item label="字体粗细">
          <el-select v-model="optionsInfo['publishSign']['fontWeight']" placeholder="请选择">
            <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['publishSign']['fontColor']"/>
        </el-form-item>
        <el-form-item label="背景颜色" v-if="false">
          <el-color-picker
              size="small"
              show-alpha
              :predefine="predefineColors"
              v-model="optionsInfo['publishSign']['backgroundColor']"/>
        </el-form-item>


        <el-form-item label="正文设置" class="call-patient-set">
          <el-button type="primary" @click="handleSelect('formVideoInfo',(optionsInfo.publishInfo))">
            素材选择
          </el-button>
        </el-form-item>
      </div>
    </template>

    <template v-if="optionsInfo['layerArea']">
      <div class="list-item-setting">
        <div class="title-info">
          <el-divider content-position="left">弹层信息</el-divider>
        </div>
        <el-select v-model="optionsInfo['layerNameKey']" placeholder="请选择" size="medium">
          <el-option
              v-for="item in layerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <template v-if="optionsInfo['layerNameKey'] ==='call-patient'">
        <div class="list-item-setting" v-for="(item,index,key) in optionsInfo['layerInfo']" :key="index">
          <div class="title-info">
            <el-divider content-position="left">{{
                (index === 'current') ? '就诊弹层设置' : '候诊弹层设置'
              }}
            </el-divider>
          </div>
          <el-form-item label="标题">
            <el-input v-model="optionsInfo['layerInfo'][index].content" placeholder="请输入内容" size="small"/>
          </el-form-item>
          <el-form-item label="显示">
            <el-switch v-model="optionsInfo['layerInfo'][index]['display']"/>
          </el-form-item>

          <el-form-item label="字号">
            <el-input-number
                :min="14"
                size="small"
                class="hide-spin-button"
                v-model="optionsInfo['layerInfo'][index].fontSize"
            />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="optionsInfo['layerInfo'][index].color"/>
          </el-form-item>
          <el-form-item label="背景颜色">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="optionsInfo['layerInfo'][index].backgroundColor"/>
          </el-form-item>
        </div>
      </template>
    </template>

    <!--更新文本内容-->
    <updateFormEditor
        :visible="formEditorInfo.visible"
        :info="formEditorInfo.info"
        @handleCancel="handleCancel"
        @handleSure="handleSure"
    />

    <!--选择图片的弹层-->
    <SelectVideoText
        :info="formVideoInfo.info"
        :visible="formVideoInfo.visible"
        :multiple="formVideoInfo.multiple"
        :infoContent="formVideoInfo.infoContent"
        @handleCancel="handleCancel"
        @handleSure="handlePublishSure"
    />
  </div>
</template>

<script>
import roomNameKeyEditor from '../basicInfo/roomNameKey-editor.vue'
import * as types from "@c/public/form-designer/devType/datas-types";
import updateFormEditor from "@c/public/layer/template/updateFormEditor/index.vue";
import SelectVideoText from "@c/public/layer/template/selectVideoText/index.vue";
import {windowOptions} from "@c/public/form-designer/devType/datas-types";

export default {
  name: "windowPublishConfig-editor",
  components: {SelectVideoText, updateFormEditor, roomNameKeyEditor},
  componentName: "windowPublishConfig-editor",
  mixins: [],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      optionsInfo: Object(),
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
      windowOptions: types['windowOptions'],
      formEditorInfo: {
        info: Object(),
        visible: false
      },
      layerOptions: [
        {
          value: 'call-patient',
          label: '通用弹层'
        },
        {
          value: 'call-patient-original-biz',
          label: '业务弹层'
        }
      ],
      formVideoInfo: {
        info: Object(),
        visible: false,
        multiple: false,
      },
    }
  },

  computed: {},

  methods: {
    // 选择文本内容&视频
    handleSelect(val, content) {
      let params = Object();
      switch (val) {
        case 'formEditorInfo':
          Reflect.set(params, 'updataType', 'businessContent');
          Reflect.set(params, 'content', content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break;
        case 'formVideoInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', 'video');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'video');

          let contents = Object();
          Reflect.set(contents, 'tabsName', content['tabsName']);
          Reflect.set(contents, 'textContent', content['textInfo']);
          Reflect.set(contents, 'videoContent', content['videoInfo'])
          Reflect.set(contents, 'pictureContent', content['pictureInfo'])
          // 旧的数据
          Reflect.set(params, 'content', contents);
          Reflect.set((this.formVideoInfo), 'infoContent', contents);
          Reflect.set((this.formVideoInfo), 'visible', true);
          Reflect.set((this.formVideoInfo), 'info', params);
          Reflect.set((this.formVideoInfo), 'multiple', false);
          break;
      }
    },

    // 关闭弹层
    handleCancel() {
      Reflect.set(this.formEditorInfo, 'visible', false);
      Reflect.set(this.formVideoInfo, 'visible', false)
    },

    // 更新就的数据
    handleSure(valInfo) {
      let {key, val} = valInfo;
      Reflect.set((this.optionsInfo), key, val);
    },

    // 信息发布
    handlePublishSure(valInfo) {
      let {tabsName, textContent, videoContent, pictureContent} = valInfo;
      switch (tabsName) {
        case "textarea":
          Reflect.set((this.optionsInfo.publishInfo), 'tabsName', tabsName);
          Reflect.set((this.optionsInfo.publishInfo), 'textInfo', textContent);
          break
        case "video":
          Reflect.set((this.optionsInfo.publishInfo), 'tabsName', tabsName);
          Reflect.set((this.optionsInfo.publishInfo), 'videoInfo', videoContent);
          break
        case "picture":
          Reflect.set((this.optionsInfo.publishInfo), 'tabsName', tabsName);
          Reflect.set((this.optionsInfo.publishInfo), 'pictureInfo', pictureContent);
          break
      }
    },
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
        if (!Reflect.has(this.optionsInfo, 'deptName')) {
          Reflect.set(this.optionsInfo, 'deptName', '采血处')
        }
        if (!Reflect.has(this.optionsInfo, 'deptNameAuto')) {
          Reflect.set(this.optionsInfo, 'deptNameAuto', true)
        }
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.replenish-shown {
  display: flex;
  flex-direction: column;

  :deep(label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    .el-input-number {
      flex-shrink: 1;
      width: 100%;
    }

    .el-select {
      flex-shrink: 1;
      width: 100%;
    }

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }
  }
}
</style>